<template>
  <div class="home">
    <div style="width: 100%; height: 100%">
      <div class="map" id="map"></div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Tile as TileLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Map, View, Feature } from "ol";
import { Style, Icon } from "ol/style";
import { Point } from "ol/geom";
import Overlay from "ol/Overlay";

export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      mapObj: null,
      mapDom: null,
      pointLayer: {},
      markerList: [
        [100.84, 36.85],
        [100.88, 36.67]
      ],
    }
  },
  mounted() {
    this.initMap();
    // this.clickMap();

    this.markerList.forEach((v, index) => {
      this.addPoints(v, index);
    })

    // 73.20139986752463, 55.71183382086091
    // 140.59154463897022,16.722475512185397
    // this.clickOverLay();
  },
  methods: {
    markerClick(e) {
      console.log(1);
      console.log(e);
    },
    // 清除地图；某些情况下地图容器会存在两个，导致地图无法正常显示。
    // 找了半天官方貌似也没有提供对应的api，自己动手了。
    mapClear() {
      if (this.mapDom) {
        this.mapDom.innerHTML = ''
        this.mapDom = null
      }
    },

    // 初始化地图
    initMap() {
      // 先尝试清除
      // this.mapClear()
      // 获取地图容器
      this.mapDom = document.getElementById('map')

      // 初始化地图配置
      this.mapObj = new Map({
        target: this.mapDom, // 地图容器
        view: new View({
          center: [101.01791, 36.93013], // 地图中心点
          zoom: 6, // 缩放
          minZoom: 6, // 设置最小缩放级别
          maxZoom: 11, // 设置最大缩放级别

          // doubleClickZoom: false,   //屏蔽双击放大事件  (失效)

          projection: 'EPSG:4326', // 坐标系
          extent: [73.1339870718837, 16.722475512185397, 140.59154463897022, 55.75498452724199],

          // 73.1339870718837, 55.75498452724199
          // 140.59154463897022,16.722475512185397
        }),
      })

      // 添加一个使用离线瓦片地图的层
      const offlineMapLayer = new TileLayer({
        source: new XYZ({
          // url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
          url: 'http://192.168.0.122:8081' + '/{z}/{x}/{y}.jpg', // 设置本地离线瓦片所在路径,前面的地址是你输入http-server之后的服务地址
        }),
      })

      this.mapObj.on('singleclick', event => {
        console.log(event.coordinate);
        let pixel = event.pixel  //pixel：点击的像素点
        //forEachFeatureAtPixel：map对象上的通过像素点获取标注点
        let feature = this.mapObj.forEachFeatureAtPixel(pixel, feature => feature);
        if (feature) {
          console.log('当前为标记点，id为：' + feature.values_.id + '，坐标为：' + event.coordinate);
          console.log(feature);
          // console.log(event);
          //如果feature存在，表示点击的是标注点
          //可以通过feature.get(属性值)来获取标注点自定义的一些属性，这些属性是在new Feature构造函数中设置的属性值
        } else {
          //如果feature不存在，表示点击的是地图的空白部分
          let coordinate = event.coordinate  //通过event.coordiante属性获取点击的地方的经纬度
          console.log('当前为空白处，坐标为:' + event.coordinate);
        }
      })
      // 将图层添加到地图
      this.mapObj.addLayer(offlineMapLayer)

      // 加载地理坐标
      // this.addPoint()
    },
    clickMap() {
      this.mapObj.on("click", (e) => {
        // this.addPoints(e.coordinate);
        console.log(e.coordinate);
      })
    },
    // clickOverLay() {

    //   this.mapObj.on('click', function (event) {
    //     const feature = this.mapObj.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
    //       return feature;
    //     });
    //     if (feature) {
    //       // 在这里执行您的回调函数，例如弹出一个信息框
    //       console.log('Feature clicked:', feature.get('name'));
    //     }
    //   })
    // },
    /**
    * 根据经纬度坐标添加覆盖物
    */
    addPoints(coordinate, index) {
      if (Object.keys(this.pointLayer).length == 0) {
        // 创建图层
        this.pointLayer = new VectorLayer({
          source: new VectorSource(),
        });
        // 图层添加到地图上
        this.mapObj.addLayer(this.pointLayer);
      }

      // 创建feature要素，一个feature就是一个点坐标信息
      const feature = new Feature({
        geometry: new Point(coordinate),
        id: index,
      });
      // 设置要素的图标
      feature.setStyle(
        new Style({
          // 设置图片效果
          image: new Icon({
            src: "http://192.168.0.122:8081/project.png",
            // anchor: [0.5, 0.5],
            scale: 0.2,
          }),
        })
      );
      // 要素添加到地图图层上
      // this.pointLayer.getSource().addFeatures([feature]);
      this.pointLayer.getSource().addFeature(feature);

      // 设置文字信息
      this.addText(coordinate);
    },
    addText(coordinate) {
      const overlayBox = document.getElementById("map"); //获取一个div
      const oSpan = document.createElement("span"); //创建一个span
      oSpan.contentEditable = false; //设置文字是否可编辑
      oSpan.id = coordinate[0]; //创建一个id
      let pText = document.createTextNode("项目" + `(${coordinate[0].toFixed(2)},${coordinate[1].toFixed(2)})`); //创建span的文本信息
      oSpan.appendChild(pText); //将文本信息添加到span
      overlayBox.appendChild(oSpan); //将span添加到div中
      let textInfo = new Overlay({
        position: coordinate, //设置位置
        element: document.getElementById(coordinate[0]),
        offset: [-70, 30], //设置偏移
      });
      this.mapObj.addOverlay(textInfo);
    },



  },
  beforeDestroy() {
    this.mapClear()
  },
}
</script>
<style lang="scss">
.home {
  height: 100vh;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // background-color: red;
  pointer-events: auto
}
</style>
